<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>项目信息</title>
    <link rel="stylesheet" type="text/css" href="css/common.css" th:href="@{/arc/css/common.css?v=3.6.0}"/>
    <script type="text/javascript" src="js/jquery-3.1.1.js" th:src="@{/js/jquery.min.js?v=3.6.0}"></script>
    <!--highcharts图表插件引用地址-->
    <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<style type="text/css">
    body {
        background: url(/arc/images/map.jpg) 100% 100%;
        background-position: top center;
    }

    .content {
        height: 30rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .content > div {
        width: 20%;
        border: 1px solid rgb(21, 136, 194);
        border-radius: 0.5rem;
    }

    #container1 {
        height: 13rem;
    }

    .divCont1 > div:first-child {
        color: white;
        display: flex;
        justify-content: space-around;
        text-align: center;
        border-bottom: 1px solid rgb(21, 136, 194);
    }

    .divCont1 > div:first-child div {
        margin: 0.6rem 0;
    }

    .pGreen, .pRed {
        font-size: 2rem;
        font-weight: bold;
    }

    .pGreen {
        color: rgb(28, 191, 135);
    }

    .pRed {
        color: rgb(237, 0, 0);
    }

    .divCont2 {
        position: relative;
        top: -6rem;
    }

    .divCont2 .pTitle {
        color: rgb(28, 191, 135);
        font-size: 1.2rem;
        line-height: 3rem;
        text-align: center;
    }

    .divCont2 .pContent {
        color: white;
        padding-left: 0.6rem;
        line-height: 1.5rem;
    }

    /*********** 插件样式设置开始 **************/
    .highcharts-exporting-group {
        display: none;
    }

    .highcharts-text-outline {
        display: none;
    }

    .highcharts-title tspan {
        font-size: 0.7rem;
    }

    .highcharts-container * {
        font-size: 0.5rem;
    }

    text.highcharts-credits {
        display: none;
    }

    g path.highcharts-point {
        stroke: none;
    }

    tspan {
        fill: white;
    }

    /*********** 插件样式设置结束 **************/
</style>
<body>
<header>
    <h1>西城区建筑工程项目监管分析平台</h1>
    <h2>XICHENG DISTRICT CONSTRUCTION PROJECT SUPERVISION AND ANALYSIS</h2>
</header>
<div class="content">
    <div class="divCont1">
        <div>
            <div>
                <p class="pGreen" id="projectCount">0</p>
                <p>项目总数</p>
            </div>
            <div>
                <p class="pRed">165</p>
                <p>当日施工人数</p>
            </div>
        </div>
        <div id="container1"></div>
    </div>
    <div class="divCont2">
        <p class="pTitle">苏荷·海棠湾</p>
        <p class="pContent">漯河星辉置业有限公司</p>
        <p class="pContent">正常施工</p>
        <br>
        <p class="pContent">齐瑞丰</p>
        <p class="pContent">19512345678</p>
    </div>
    <div id="container3"></div>
</div>
</body>
<script type="text/javascript">
    /** 消息状态码 */
    web_status = {
        SUCCESS: 0,
        FAIL: 500,
        WARNING: 301
    };

    $(function () {
        loadProjectCount();
        initCharts();
    });

    function initCharts() {

        $.ajax({
            url: "/architecture/home/queryProjectStatusInfo",
            data: null,
            cache: false,
            contentType: false,
            processData: false,
            type: 'GET',
            success: function (result) {
                if (result.code == web_status.SUCCESS) {
                    var arr = new Array();
                    for (let i = 0; i < result.data.length; i++) {
                        var item = result.data[i];
                        let sa = new Array();
                        sa.push(item.projectStatus);
                        sa.push(item.count);
                        arr.push(sa);
                    }
                    $('#container1').highcharts({
                        title: {
                            text: '项目状态'
                        },
                        chart: {
                            type: 'pie',
                            backgroundColor: 'none'
                        },
                        colors: ['rgb(28,191,135)', 'rgb(237,190,0)', 'rgb(237,0,0)'],
                        plotOptions: {
                            pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                // 图标箭头标题
                                dataLabels: {
                                    //允许箭头显示
                                    enabled: true,
                                    distance: 10,
                                    format: '{point.name}：{point.y}'
                                    //箭头颜色
                                    // connectorColor: 'white'
                                },
                                // 图标底部概况
                                showInLegend: true
                            }
                        },
                        series: [{
                            colorByPoint: true,
                            innerSize: '80%',
                            name: '数量',
                            data: arr
                        }]
                    });
                } else {
                    alert(result.msg);
                }
            }
        });


        $('#container3').highcharts({
            title: {
                text: '信访风险情况一览图'
            },
            chart: {
                type: 'pie',
                backgroundColor: 'none'
            },
            colors: ['rgb(28,191,135)', 'rgb(237,190,0)', 'rgb(248,122,31)', 'rgb(237,0,0)'],
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    // 图标箭头标题
                    dataLabels: {
                        //允许箭头显示
                        enabled: true,
                        distance: 10,
                        format: '占比：{point.percentage:.1f}%<br><b>项目个数：{point.y}</b>'
                        //箭头颜色
                        // connectorColor: 'white'
                    },
                    // 图标底部概况
                    showInLegend: true
                }
            },
            legend: {
                //竖直显示，默认是水平显示的
                layout: 'vertical',
                //图例说明在区域的右边，默认在中间
                // align: 'middle'
                //竖直方向居中，默认在底部
                // verticalAlign: 'middle'
            },
            series: [{
                colorByPoint: true,
                name: '数量',
                data: [
                    ['正常：风险指数值＜30', 12],
                    ['黄色预警：风险指数值≥30，≤60', 20],
                    ['橙色预警：风险指数值≥60，≤90', 30],
                    ['红色预警：风险指数值≥90', 9]
                ]
            }]
        });
    }


    function loadProjectCount() {
        $.ajax({
            url: "/architecture/home/queryProjectCount",
            data: null,
            cache: false,
            contentType: false,
            processData: false,
            type: 'GET',
            success: function (result) {
                if (result.code == web_status.SUCCESS) {
                    $('#projectCount').html(result.data);
                } else {
                    alert(result.msg);
                }
            }
        });
    }

    loadProjectCount();
</script>
</html>
